<template>
  <div class="comments">
    <ul >
      <li>
        <span class="index">序列</span>
        <span class="username">举报人</span>
        <span class="comment">评论</span>
        <span class="info">举报信息</span>
        <span class="time">举报时间</span>
        <span class="caozuo">操作</span>
      </li>
      <li v-for="(item,index) in res" :key="item.reportid">
        <span class="index">{{index+1}}</span>
        <span class="username">{{item.username}}</span>
        <span class="comment" v-html="item.content"></span>
        <span class="info">{{item.cause}}</span>
        <span class="time">{{timer(item.time)}}</span>
        <span class="caozuo">
          <a href="JavaScript:;" title="查看" @click="lookComment(item.content)">
            <svg class='icon' aria-hidden='true'>
              <use xlink:href='#icon-chakan'></use>
            </svg>
            <span>查看</span>
          </a>
          <a href="JavaScript:;" title="删除" @click="removeComment(item)">
            <svg class='icon' aria-hidden='true'>
              <use xlink:href='#icon-shanchu'></use>
            </svg>
            <span>删除</span>
          </a>
          <a href="JavaScript:;" @click="removeReportComment(item)" title="取消">
            <svg class='icon' aria-hidden='true'>
              <use xlink:href='#icon-guanbi-copy'></use>
            </svg>
            <span>取消</span>
          </a>
        </span>
      </li>
    </ul>
    <paging-vue :result="commentsData" @result="showRes"></paging-vue>
    <win-vue v-if="comments" @off="comments=''" :comments="comments"></win-vue>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import tool from '../../../../assets/js/tool'
import pagingVue from "../../../info/mini/paging.vue"
import winVue from './win.vue'
export default {
  name: 'Reportcomment',

  data() {
    return {
      res: [], // 当前展示评论数据集
      comments: '' // 查看评论内容
    }
  },

  props: {
    // 全部评论数据集
    commentsData:{
      type: Array,
      default: () => []
    }
  },

  computed:{
    timer(){
      return (time) => tool.GetTimer(time)
    }
  },

  methods: {
    // 数据展示
    showRes(res){
      this.res = res
    },
    // 举报失败,删除举报信息
    removeReportComment(obj){
      let data = {
        title: '评论',
        id: obj.reportid
      }
      this.$api.removeReport(data).then(res => {
        if(res == 1){
          this.showHint({title:'已处理',isFlag:true})
          this.commentsData = this.commentsData.filter((val) => obj.reportid != val.reportid)
        }
      })
    },
    // 举报成功,删除评论
    removeComment(obj){
      this.$api.removeComment({id:obj.commentid}).then(res => {
        if(res == 1){
          this.showHint({title:'已处理',isFlag:true})
          this.commentsData = this.commentsData.filter((val) => obj.reportid != val.reportid)
        }else{
          this.showHint({title:res,isFlag:false})
        }
      })
    },
    // 查看评论内容
    lookComment(text){
      this.comments = text
    },
    ...mapActions(['showHint'])
  },

  components: {
    pagingVue,winVue
  }
};
</script>

<style scoped>
.comments ul{
  border-left: 1px solid gray;
}
.comments li:first-child{
  background-color: green;
  font-weight: 600;
  color: white;
}
.comments li{
  display: flex;
  height: 40px;
  line-height: 40px;
}
.index{
  width: 50px;
}
.username,.time{
  flex: 1;
}
.info,.comment,.caozuo{
  flex: 2;
}
.content ul span{
  border-bottom: 1px solid gray;
  border-right: 1px solid gray;
}
.comment{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.caozuo{
  display: flex;
  align-items: center;
  justify-content: center;
}
.caozuo a{
  font-size: 1.2rem;
  margin: 5px;
  display: flex;
  align-items: center;
}
.caozuo a:hover{
  color: red;
}
.caozuo a span{
  font-size: 0.7rem;
  border: none;
}
</style>